<template>
  <div>
    <el-form ref="form" :model="registerForm" label-width="125px" style="padding: 0 40px;" label-position="left" :disabled="ifDisabled">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="注册地址" style="margin-bottom: 5px;">
            <el-input class="input" v-model="registerForm.registerAddress" size="small"></el-input>
          </el-form-item>
          <el-form-item label="经营地址" style="margin-bottom: 5px;">
            <el-input class="input" v-model="registerForm.businessAddress" size="small"></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" style="margin-bottom: 5px;">
            <el-input class="input" v-model="registerForm.creditCode" size="small"></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="location" style="margin-bottom: 5px;">
            <el-cascader
              v-model="registerForm.location"
              :options="options"
              @change="handleChange"
              :props="prop"
              size="small"
              filterable
              class="input"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="派出单位" style="margin-bottom: 5px;" prop="dispatchDes">
            <el-select v-model="registerForm.dispatchDes"
              class="input"
              size="small"
              filterable
              clearable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              @change="selectManageType"
              placeholder="请输入字段搜索"
            >
              <el-option
                v-for="item in dispachOptions"
                :key="item.companyCode"
                :label="item.companyName"
                :value="item.companyCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册类型小类" prop="registerTypeDetail" style="margin-bottom: 12px;">
            <el-select v-model="registerForm.registerTypeDetail" size="small" filterable clearable class="input">
              <el-option
                v-for="item in registerDetailTypeOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="cmhkStatus==='注销'?true:false" label="退出日期" style="margin-bottom: 5px;">
            <el-date-picker type="date" v-model="registerForm.propertyQuitDate" size="small" disabled></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册地址坐标" style="margin-bottom: 5px;">
            <el-input class="input" v-model="registerForm.registerAddressCode" size="small"></el-input>
          </el-form-item>
          <el-form-item label="经营地址坐标" style="margin-bottom: 5px;">
            <el-input class="input" v-model="registerForm.businessAddressCode" size="small"></el-input>
          </el-form-item>
          <el-form-item label="注册号" style="margin-bottom: 5px;">
            <el-input class="input" v-model="registerForm.registerId" size="small"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="operName" style="margin-bottom: 5px;">
            <el-input v-model="registerForm.operName" disabled :class="ifDisabled?'input':'input-btn'" size="small"></el-input>
            <el-button v-show="!ifDisabled" type="text" @click="handleDialogShow">选择</el-button>
          </el-form-item>
          <el-form-item label="主办单位" style="margin-bottom: 5px;">
            <el-select v-model="registerForm.organizer" size="small" class="input">
              <el-option
                v-for="item in organizeroptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成立日期" style="margin-bottom: 5px;">
            <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.startDate" size="small"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="主要业务活动" style="margin-bottom: 5px;">
        <el-input type="textarea" :rows="3" v-model="registerForm.businessRange"></el-input>
      </el-form-item>
    </el-form>
    <el-dialog title="选择" :visible.sync="dialogVisible" width="75%" :before-close="handleCancle">
      <el-form ref="dialog" :model="formInline" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="中文名" style="margin-bottom: 5px;" prop="chiName">
              <el-input v-model="formInline.chiName" size="small" @keyup.enter.native="handleSearchPeople"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="英文名" style="margin-bottom: 5px;" prop="engName">
              <el-input v-model="formInline.engName" size="small" @keyup.enter.native="handleSearchPeople"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="margin-bottom: 5px;">
              <el-button type="primary" size="small" @click="handleSearchPeople">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-box">
        <TableComponent :columns="dialogTableColumns" :data="dialogtableData" :tableOption="dialogtableOption" :stripe="stripe" @rowClick="rowClick"></TableComponent>
      </div>
      <span slot="footer">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/modules/propertyRight.js'
import TableComponent from '@/components/Table/table'
import { dialogTableColumns } from '../js/index.js'
export default {
  components: {
    TableComponent
  },
  props: {
    nineth: {
      type: Object,
      required: true
    }
  },
  watch: {
    nineth: {
      handler(val) {
        console.log(val)
        this.ifDisabled = val.ifDisabled
      },
      deep: true
    }
  },
  data() {
    return {
      registerForm: {
        cmhkId: '',
        registerId: '',
        startDate: '',
        operName: '',
        registerAddressCode: '',
        registerAddress: '',
        businessAddress: '',
        businessAddressCode: '',
        businessRange: '',
        organizer: '',
        location: [],
        dispatch: '',
        registerTypeDetail: '',
        creditCode: '',
        propertyQuitDate: ''
      },
      organizeroptions: [],
      dispachOptions: [],
      registerDetailTypeOption: [],
      dialogVisible: false,
      dialogTableColumns,
      formInline: {
        chiName: '',
        engName: '',
        type: '3'
      },
      dialogtableOption: {
        isShowOperate: false
      },
      dialogtableData: [],
      stripe: true,
      handleName: '',
      handleCode: '',
      options: [],
      prop: {
        label: 'name',
        value: 'code',
        children: 'child'
      },
      ifDisabled: true,
      saveCmhkId: {
        cmhkId: ''
      },
      cmhkStatus: ''
    }
  },
  methods: {
    // 基本信息查询(此方法在父组件中调用)
    getBranchMsg(params) {
      this.saveCmhkId.cmhkId = params.cmhkId
      this.cmhkStatus = params.cmhkStatus
      api.queryBranch(this.saveCmhkId).then(res => {
        if (res.data.code === '0') {
          this.registerForm = res.data.body
        } else {
          this.$message.error(res.data.message)
        }
      })
      const obj = {
        code: params.registerType,
        tableName: "company",
        field: "register_type"
      }
      api.queryRegisterDetailType(obj).then(res => {
        this.registerDetailTypeOption = res.data.data
      })
    },
    // 基本信息修改(此方法在父组件中调用)
    editBranchMsg() {
      const obj = Object.assign(this.registerForm, this.saveCmhkId)
      api.editbasicMsgFormal(obj).then(res => {
        if (res.data.code === '0') {
          this.$message.success('基本信息修改成功')
          this.getBranchMsg(this.saveCmhkId)
        }
      })
    },
    cmbusinessTypes() {
      // 主办单位
      api.Organizer().then(res => {
        this.organizeroptions = res.data.body
      })
      // 所属地区
      api.allArea().then(res => {
        if (res.data.code === '0') {
          this.options = this.getTreeData(res.data.body)
        }
      })
    },
    getTreeData(data){
      // 循环遍历json数据
      for(let i=0;i<data.length;i++){
        if(data[i].child.length<1){
          // children若为空数组，则将children设为undefined
          data[i].child = undefined
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].child)
        }
      }
      return data
    },
    // 选择所在地区
    handleChange(val) {
      this.registerForm.location = val
    },
    // 派出单位远程搜索
    remoteMethod(query) {
      const data = {
        companyChiName: query
      }
      api.queryDispatchOrg(data).then(res => {
        this.dispachOptions = res.data.body
      })
    },
    selectManageType(val) {
      this.registerForm.dispatch = val
    },
    handleDialogShow() {
      this.dialogVisible = true
    },
    rowClick(val) {
      this.handleName = val.chiName
      this.handleCode = val.code
    },
    // 点击确认选择负责人
    handleSubmit() {
      this.registerForm.operName = this.handleName
      this.registerForm.operCode = this.handleCode
      this.handleCancle()
    },
    handleSearchPeople() {
      api.managementOrg(this.formInline).then(res => {
        this.dialogtableData = res.data.body
      })
    },
    handleCancle() {
      this.resetForm('dialog')
      this.handleName = ''
      this.handleCode = ''
      this.dialogtableData = []
      this.dialogVisible = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
  .input {
    width: 100%;
  }
  .input-btn {
    width: calc(100% - 40px);
  }
  .dialog-box {
    height: 50vh;
    overflow: auto;
  }
</style>
<style>
  .el-input.is-disabled .el-input__inner {
    background-color:rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
</style>